<template>
  <section>
    <idss-widget style="padding: 10px;">
      <template slot="title-left">
        <span>Banner列表</span>
      </template>
    </idss-widget>
    <idss-widget style="padding:0 10px 15px;">
      <template slot="title-left">
        <!-- 新建 -->
        <el-button icon="el-icon-plus" size="mini" @click="addBanner">新增</el-button>
      </template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
        <el-table-column prop="img" label="预览" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt />
          </template>
        </el-table-column>
        <el-table-column prop="link" label="链接" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small" @click="delBanner(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </idss-widget>

    <el-dialog :title="commonDialog.title" :visible.sync="commonDialog.dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="上传图片">
          <el-upload
            class="upload-demo"
            ref="upload"
            action
            :on-change="imgPreview"
            :file-list="fileList"
            :on-exceed="handleExceed"
            list-type="picture"
            :limit="1"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片链接">
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item class="myitem" style="text-align:center">
          <el-button size="small" @click="commonDialog.dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="saveBanner">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
const API = {
  // banner列表
  LIST: {
    url: "/api/services/app/Banner/GetAll",
    method: "Get"
  },
  // 新增
  ADD: {
    url: "/api/services/app/Banner/Create",
    method: "post"
  }
};
export default {
  data() {
    return {
      tableData: [],
      form: {
        img: "",
        link: ""
      },
      commonDialog: {
        title: "上传图片",
        dialogVisible: false
      },
      fileList: [],
      fileReader: new FileReader()
      // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
    // 新增banner
    addBanner() {
      this.commonDialog.dialogVisible = true;
    },
    // 保存banner
    saveBanner() {
      this.$axios({
        ...API.ADD,
        data: this.form
      }).then(() => {
        this.$message({
          type: "success",
          message: "新增成功"
        });
        this.getBanner();
      });
      this.commonDialog.dialogVisible = false;
    },
    // 删除banner
    delBanner(id) {
      this.$confirm("此操作将永久删除该Banner, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios({
          url: "/api/services/app/Banner/Delete" + `?Id=${id}`,
          method: "DELETE"
        }).then(() => {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.getBanner();
        });
      });
    },
    getBanner() {
      this.$axios({
        ...API.LIST
      }).then(res => {
        console.log(res);
        this.tableData = res.data.result.items;
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(`图片只能上传一个,请先移除已上传的图片!`);
    },
    imgPreview(file, fileList) {
      console.log(file);
      if (file.raw) {
        this.fileReader.readAsDataURL(file.raw);
      }
      this.fileReader.onload = () => {
        this.form.img = this.fileReader.result;
      };
    }
  },
  mounted() {
    this.getBanner();
  }
};
</script>
<style >
.myitem .el-form-item__content {
  margin-left: 0 !important;
}
</style>
